<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性</title>
		<style>
			/*1.控制字体：font-family指定字体家族属性*/
			{
				/*免费：微软雅黑，楷体，黑体，宋体*/
				font-family: 微软雅黑,sans-serif;
				/*用户电脑存在字体，按照顺序选择执行，二选一，就近原则*/
				/*font-size: ;字体尺寸属性：px 绝对值--pc  em：相对于父元素字体倍数调整--移动端*/
				font-size: 1.5em;
				/*font-weight: 字体加粗属性; 属性值：数值【整数】 100~900 
				                            英文   normal=400 bold=900
				*/
			   font-weight: 900;
			   /*font-style字体样式属性*/
			   font-style: italic;
			   /*text-transform: 字体转换属性：属性值 uppercase转大写 
			                                        lowercase转小写;
													caitalize首字母转大写*/
			   text-transform: uppercase;
			   text-transform: lowercase;
			   text-transform: capitalize;
			   /*text-indent: 文本块首行缩进属性：属性值 数值px;*/
			   text-intent:50px;
			}
			/*2.控制文本布局*/
			h 1+p{
				border: 1px solid red;
				/*text-align: 文本对齐属性：属性值：left/right/center
				针对文本左右对局 justify两端对齐【文本沾满空间】
				;*/
				text-align: right;
				text-align: justify;
				/*line-height: 行高属性：属性值：数值px  针对文本行高，文本垂直居中;*/
				height: 40px;
				line-height: 40px;
				/*文本垂直居中：高度与行高一致*/
				/*letter-spacing: 字符间距属性：属性值 [正负]数值px;*/
				letter-spacing: 10px;
				/*word-spacing: 单词间距属性：属性值 【正负】数值px;*/
				word-spacing: 10px;
			}
			/*3.文本装饰效果*/
			p a{
				border: 1px solid #6d6d6d;
				padding: 6px 10px;
				border-radius: 3px;
				margin-left: 10px;
			}
			/*默认效果：去边框，下划线去掉*/
			p a.current{
				border: 0;
				/*text-decoration超链接效果属性：属性值 none 去掉下划线
				underline默认有下划线
				line-through删除线
				*/
				text-decoration: none;
				text-decoration: underline;
				text-decoration: line-through;
				color: #000;
			}
			p>span{
				border: 1px solid red;
				/*text-shadow:文本阴影属性     阴影：1.滤镜：下阴影2.文本阴影3.盒子阴影;*/
				/*    属性值：x y 模糊距离 颜色 */
				text-shadow: 5px 5px 10px #0055ff;
			}
			/*4.文本换行属性*/
			h1~span{
				border: 1px solid red;
				/*white-space: 文本换行属性:nowrap;一行显示 添加回车
				                           pre    保留空格与回车
										   normol 默认 空格合并 自动换行
				*/
				whi te-space: nowrap;
				whi te-space: pre;
				white-space: normal;
			}
		</style>
	</head>
	<body>
		<!-- 文本格式化属性：针对文本和字体，四种效果：
		 1.控制字体：font-family,font-size,font-weight等
		 2.控制文本对局：text-align,line-height,letter-spacing等
		 3.文本装饰效果：text-decoration，text-shadow等
		 4.文本溢出和换行：overflow，white-space.
		 -->
		 <h1>文本格式化属性:控制字体</h1>
		 Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto vitae pariatur assumenda eum, odit quisquam expedita exercitationem vel odio modi voluptate ut itaque error beatae explicabo asperiores ex nihil non
		 <h1>控制文本布局：文本</h1>
		 <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Modi earum corporis obcaecati sapiente optio quisquam quas repudiandae minima. Rerum laudantium eos sit amet quaerat cum numquam quos ullam praesentium sapiente.</p>
		 <h1>文本装饰效果</h1>
		 <p>
			 <a href="#" class="current">1</a>
			 <a href="#">2</a>
			 <a href="#">3</a>
			 <a href="#">4</a>
			 <a href="#">5</a>
			 <a href="#">6</a>
			 <span>测试文本阴影</span>
		 </p>
		 <h1>文本换行属性</h1>
		 <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi sint nam aliquam! Illum possimus quos veniam tenetur quis, sapiente ducimus, neque magnam quidem fugit eius, ea voluptates quae illo sit.</span>
	</body>
</html>